<template>
	<view class="popupclass" @touchmove.prevent>
		<u-popup :show="showPopup" mode="right" @open="open" :duration="500">
			<scroll-view scroll-y="true" @touchmove.stop>
				<view class="content">
					<!-- 搜索框 -->
					<view class="search-box">
						<view class="search">
							<u-search
								:showAction="false"
								@change="searchKeyWord"
								v-model="keyword"
								@search="searchListFn(keyword)"
								bgColor="#f7f8fa"
								shape="square"
								:placeholder="defaultKeyword"
							></u-search>
							<text @tap="cancel">取消</text>
						</view>
					</view>

					<!-- 搜索列表 -->
					<view class="search-list" v-show="stateClass2">
						<ul>
							<li @tap="searchListFn(item)" v-for="(item, index) in resList" :key="index">{{ item }}</li>
						</ul>
					</view>

					<!-- 下拉菜单 -->
					<van-dropdown-menu v-show="stateClass3">
						<van-dropdown-item :disabled="true" :value="value1" :options="option1" />
						<van-dropdown-item @change="getPrice" :value="value2" title="价格" :options="option2" />
						<van-dropdown-item @change="getClassiFication" :value="value3" title="分类" :options="option3" />
					</van-dropdown-menu>

					<view class="icon" v-show="iconshow"><u-empty text="暂无商品" icon="https://img01.yzcdn.cn/vant/empty-image-search.png"></u-empty></view>

					<!-- 没有更多了 -->
					<view class="nomore" v-show="!stateClass3 && !stateClass1">没有更多了</view>

					<view class="cd-search-box" v-show="stateClass1">
						<!-- 历史记录 -->
						<view class="histroy-title">
							<h3>历史记录</h3>
							<u-icon name="trash" size="18" @tap="clearHistroy"></u-icon>
						</view>
						<view class="histroy-txt">
							<ul>
								<li @tap="searchListFn(item)" v-for="(item, index) in historyKeywordList" :key="index">{{ item }}</li>
							</ul>
						</view>
					</view>

					<!-- 热门搜索 -->
					<view class="hotsearch" v-show="stateClass1">
						<h3>热门搜索</h3>
						<view class="histroy-txt">
							<ul>
								<li @tap="searchListFn(item.keyword)" v-for="(item, index) in hotKeywordList" :key="index" :class="item.is_hot == 1 ? 'active' : ''">
									{{ item.keyword }}
								</li>
							</ul>
						</view>
					</view>
					<!-- 商品列表 -->
					<goodsList :goodsList="goodsList"></goodsList>
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { ApiSearchIndex, ApiSearchHelper, ApiClearHistory, ApiGetGoodsList } from '@/utils/api.js';
import goodsList from '@/components/cd-goods-list/cd-goods-list.vue';
export default {
	name: 'cd-Popup',
	components: {
		goodsList
	},
	data() {
		return {
			option1: [{ text: '综合', value: 0 }],
			option2: [{ text: '价格由高到低', value: 0 }, { text: '价格由低到高', value: 1 }],
			option3: [{ text: '全部', value: 0 }],
			value1: 0,
			value2: -1,
			value3: 0,

			keyword: '',
			defaultKeyword: '',
			// 历史记录组
			historyKeywordList: [],
			// 热门搜索组
			hotKeywordList: [],
			// 搜索是显示的列表
			searchShowList: [],
			// 搜索时控制记录显示与隐藏
			// sreaching: false,

			resList: [],

			token: '',

			goodsList: [],

			filterCategory: [],
			// 临时测试的token
			// token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoyMTM2MSwiaWF0IjoxNjY4NDI2NzAxfQ.hT6BB-CoZKq5YX5Fi0RSVs4F1yhWWaKYPMalPx0cutI'

			// 进入时的样式状态
			// 历史记录& 热门搜索样式
			stateClass1: 1,

			// 关键词列表样式
			stateClass2: 0,

			// 下拉菜单样式
			stateClass3: 0,

			// 图标显示
			iconshow: 0,
			// 搜索框防抖计时器
			timer: null,
			timerr: null,

			// 价格筛选
			price: 'desc',

			// 分类筛选
			categoryId: 'id'
		};
	},

	computed: {
		...mapState({
			istoken: state => state.istoken,
			showPopup: state => state.showPopup
		}),
		show() {
			return this.showPopup;
		}
	},

	methods: {
		...mapMutations(['changeShowPopup']),

		// 弹出框打开时
		open() {
			// 读取token
			this.token = uni.getStorageSync('X-Nideshop-Token');

			// 恢复默认值
			this.stateClass1 = 1;
			this.stateClass2 = 0;
			this.stateClass3 = 0;
			this.iconshow = 0;
			this.value2 = -1;
			this.value3 = 0;
			// this.defaultKeyword = null;
			this.keyword = null;
			this.goodsList = [];
			this.resList = [];
			this.price = 'desc';
			// console.log('this.keyword:', this.keyword);
			// console.log(this.showPopup);

			this.getSearchData();
		},

		// 取消
		cancel() {
			this.changeShowPopup(false);
			// this.stateClass1 = 1;
			// this.iconshow = 0;
			// console.log(this.stateClass1);
		},
		// 监听搜索框输入的值
		searchKeyWord(e) {
			this.goodsList = [];
			this.keyword = e;
			clearTimeout(this.timer);
			this.timer = setTimeout(async () => {
				this.getApiSearchHelper();
			}, 500);

			if (e == '') {
				this.stateClass1 = 0;
				this.stateClass2 = 1;
				this.stateClass3 = 0;
			}
			// console.log(this.keyword);
		},

		// 下拉菜单价格请求
		getPrice(e) {
			if (e.detail == 0) {
				this.value2 = e.detail;
				this.price = 'desc';
				this.getApiGetGoodsList();
			} else if (e.detail == 1) {
				this.value2 = e.detail;
				this.price = 'asc';
				this.getApiGetGoodsList();
			}
		},
		// 下拉菜单分类请求
		getClassiFication(e) {
			this.value3 = e.detail;
			// console.log(this.filterCategory[e.detail].id);
			this.categoryId = this.filterCategory[e.detail].id;
			this.getApiGetGoodsList();
		},

		// 点击搜索列表
		searchListFn(text) {
			this.keyword = text;
			clearTimeout(this.timerr);
			this.timerr = setTimeout(async () => {
				this.getApiSearchHelper();
			}, 500);

			this.stateClass1 = 0;
			this.stateClass2 = 0;
			// this.stateClass3 = this.resList.length !== 0 ? 1 : 0;
			this.stateClass3 = 1;

			// console.log(this.resList);
			this.getApiGetGoodsList();
		},

		// 清除历史记录
		async clearHistroy() {
			let res = await ApiClearHistory({
				'X-Nideshop-Token': this.token
			});
			console.log('clear', res);
			if (res.errno == 0) {
				uni.showToast({
					title: '删除成功！',
					icon: 'success'
				});
				this.getSearchData();
			}
		},

		// 搜索框数据请求
		async getSearchData() {
			let { data: res } = await ApiSearchIndex({
				'X-Nideshop-Token': this.token
			});
			// this.keyword = res.defaultKeyword.keyword;
			this.defaultKeyword = res.defaultKeyword.keyword;
			this.hotKeywordList = res.hotKeywordList;
			this.historyKeywordList = res.historyKeywordList;
			// console.log('index---', res);
		},

		// 实时搜索请求
		async getApiSearchHelper() {
			let { data: resList } = await ApiSearchHelper({
				'X-Nideshop-Token': this.token,
				keyword: this.keyword
			});

			this.resList = resList;
		},
		// 搜索框商品搜索
		async getApiGetGoodsList() {
			let { data: res } = await ApiGetGoodsList({
				'X-Nideshop-Token': this.token,
				keyword: this.keyword,
				order: this.price,
				categoryId: this.categoryId
			});
			this.goodsList = res.goodsList;
			this.filterCategory = res.filterCategory;
			this.option3 = res.filterCategory.map((item, index) => {
				return {
					text: item.name,
					value: index,
					id: item.id
				};
			});
			this.iconshow = this.goodsList.length == 0 ? true : false;
			// console.log(res);
			// console.log(this.option3);
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/ .van-popup--top {
	z-index: 99999 !important;
}

/deep/ .van-dropdown-item {
	top: 112px !important;
}
/deep/ .van-overlay {
	top: 100rpx;
}

.popupclass {
	.content {
		width: 750rpx;
		height: 100vh;
		background-color: #efefef;
		.search-box {
			position: relative;
			z-index: 99999;
			background-color: #fff;
			padding: 22rpx;
			.search {
				box-sizing: border-box;
				display: flex;
				align-items: center;
				text {
					padding-left: 22rpx;
				}
			}
		}

		.search-list {
			background-color: #fff;
			padding-left: 22rpx;
			ul {
				padding: 0;
				list-style: none;
				li {
					height: 86rpx;
					line-height: 86rpx;
					border-bottom: 2px solid #f6f7f8;
					font-size: 28rpx;
					box-sizing: border-box;
				}
			}
		}

		.menu {
			position: relative;
			z-index: 99999;
			padding: 0 22rpx;
			display: flex;
			background-color: #fff;
			justify-content: space-around;
			align-items: center;
			height: 92rpx;
			box-shadow: 0 10rpx 24rpx #f2f2f2;

			.title {
				box-sizing: border-box;
				display: flex;
				font-size: 30rpx;
				text {
					padding-right: 10rpx;
					color: #323233;
				}
			}
		}

		.nomore {
			text-align: center;
			padding-top: 40rpx;
			color: #969799;
			font-size: 28rpx;
		}
		.cd-search-box {
			padding: 22rpx;
			padding-top: 0;
			background-color: #fff;

			.histroy-title {
				padding-top: 40rpx;
				display: flex;
				justify-content: space-between;
			}

			.histroy-txt {
				width: 100%;

				ul {
					padding: 0;
					width: 100%;
					list-style: none;
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;
					li {
						border: 1px solid #abacad;
						border-radius: 5px;
						padding: 5rpx 10rpx;
						margin-right: 20rpx;
						margin-top: 20rpx;
						color: #abacad;
						font-size: 24rpx;
					}
				}
			}
		}
	}
	.active {
		border-color: #f02c43 !important;
		color: #f02c43 !important;
	}
	.hotsearch {
		padding: 22rpx;
		margin-top: 40rpx;
		background-color: #fff;
		.histroy-txt {
			width: 100%;

			ul {
				padding: 0;
				width: 100%;
				list-style: none;
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				li {
					border: 1px solid #abacad;
					border-radius: 5px;
					padding: 5rpx 10rpx;
					margin-right: 20rpx;
					margin-top: 20rpx;
					color: #abacad;
					font-size: 24rpx;
				}
			}
		}
	}
}
</style>
